<template>
  <div class="ov">
    <div class="flex">
      <iframe
        :src="src"
        frameborder="0"
        id="bdIframe"
        class="border"
      ></iframe>
    </div>
    <div class="flex">
      <el-button
        type="primary"
        size="small"
        style="margin: 5px;padding: 0;height: 30px;line-height: 30px;width: 50px;"
        @click="onRun"
      >运行</el-button>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="javascript" name="javascript">
          <prism-editor
            class="my-editor"
            @input="getCode($event,'js')"
            v-model="js"
            :highlight="highlighter"
            :lineNumbers="true"
            :ignoreTabKey="true"
          />
        </el-tab-pane>
        <el-tab-pane label="html" name="html">
          <prism-editor
            class="my-editor"
            @input="getCode($event,'html')"
            v-model="html"
            :highlight="highlighter"
            :lineNumbers="true"
            :ignoreTabKey="true"
          />
        </el-tab-pane>
        <el-tab-pane label="css" name="css">
          <prism-editor
            class="my-editor"
            @input="getCode($event,'css')"
            v-model="css"
            :highlight="highlighter"
            :lineNumbers="true"
            :ignoreTabKey="true"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { demoList } from '@/utils/demoData.js'

import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-tomorrow.css';
export default{
  components: {
    PrismEditor,
  },
  data() {
    return {
      src: '/demo/index.html',
      list: demoList.demoList,
      activeName: 'javascript',
      html: '',
      css: '',
      js: '',
      runCode: ''
    }
  },
  created() {
    for (let i = 0; i < demoList.length; i++) {
      if (demoList[i].id == this.$route.query.id) {
        this.src = demoList[i].url
        this.html = demoList[i].html
        this.css = demoList[i].css
        this.js = demoList[i].js
        document.title = `演示-${demoList[i].name}`
      }
    }
    // console.clear()
    // console.log(`/**
    // \n* 我们生在一个最好的时代,
    // \n* 科技的发展改变了我们的生活方式,
    // \n* 同样也给每个人创造价值的可能性;
    // \n* 这也是一个最充满想象的时代,
    // \n* 每一位心怀梦想的人,终会奔向星辰大海！
    // \n*/`)
  },
  methods: {
    highlighter(code) {
      return highlight(code, languages.js);
    },
    getCode(e,type) {
      if (type == 'css') {
        this.css = e
        return false;
      }
      if (type == 'html') {
        this.html = e
        return false;
      }
      if (type == 'js') {
        this.js = e
        return false;
      }
    },
    onRun() {
      let that = this
      function loadScriptString(code) {
        var iframeEl = document.getElementById('bdIframe').contentDocument;

        // 创建style
        let stylee = iframeEl.createElement("style");
        stylee.type = 'text/css';
        stylee.innerHTML = that.css;

        // 创建html
        iframeEl.body.innerHTML = that.html

        // 创建script
        let script = iframeEl.createElement("script");
        script.type = "text/javascript";
        try {
          //IE浏览器认为script是特殊元素,不能再访问子节点;报错;
          script.appendChild(iframeEl.createTextNode(code));
        } catch (ex) {
          script.text = code;
        }
        iframeEl.getElementsByTagName('head')[0].innerHTML = '';
        iframeEl.getElementsByTagName('head')[0].appendChild(script);
        iframeEl.getElementsByTagName('head')[0].appendChild(stylee);
      }
      var str = that.js
      loadScriptString(str)
    }
  }
}
</script>
<style lang="scss" scoped>
.ov{
  overflow-y: hidden;
  height: 100%;
  display: flex;
  width: 100%;
}
.flex{
  flex: 1;
}
.border{
  background: rgba(0,0,0,.1);
  box-sizing: border-box;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

// code-edit
.my-editor {
  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
  background: #2d2d2d;
  color: #ccc;

  /* you must provide font-family font-size line-height. Example: */
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional class for removing the outline */
.prism-editor__textarea:focus {
  outline: none;
}
::v-deep .el-tabs{
  height: calc(100vh - 40px);
  background: #2d2d2d;
  overflow: auto;
  .el-tabs__header{
    margin: 0;
    .el-tabs__nav-scroll{
      background: #2d2d2d;
      border-bottom: 1px solid #646464;
    }
    .el-tabs__item{
      color: #fff;
      border: 0;
      &.is-active{
        background: #646464;
        color: #fff;
        border: 0;
      }
    }
    .el-tabs__nav{
      border-radius: 0;
      background-color: #2d2d2d;
      border: 0;
      color: #fff;
    }
  }
}
</style>